<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电商管理后台</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../styles/common.css" />
    <link rel="stylesheet" href="../styles/index.css" />
    <link rel="stylesheet" href="../styles/icon/iconfont.css" />
    <style>
        .login-box {
            width: 100%;
            height: 580px;
            max-width: 360px;
            padding:10px 20px;
        }
    </style>
</head>

<body>
<div class="login-boxtitle" style="height: 100px;">
    <div class="logoBig">
        <img src="../images/logo2.png" style="margin-left:100px ; height: 200px;width: 250px">
    </div>
</div>
<div class="login-banner" style="background: snow; margin-top: 100px">
    <div class="login-main">
        <div class="login-box" id="app" style="text-align: center;margin-left: 750px">
            <h3 class="title">用户注册</h3>
            <div class="clear"></div>
            <div class="login-form" style="background: none;">
                <el-form :model="ruleForm" :rules="rules" ref="dataAddForm">
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user" v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-lock" v-model="ruleForm.password" placeholder="请输入密码" type="password"></el-input>
                    </el-form-item>
                    <template>
                        <el-radio style="margin-left: 50px" v-model="ruleForm.sex" label="男"><i class="el-icon-male" style="font-weight: bold"></i></el-radio>
                        <el-radio style="margin-left: 90px" v-model="ruleForm.sex" label="女"><i class="el-icon-female" style="font-weight: bold"></i></el-radio>
                    </template>
                    <el-form-item prop="telephone">
                        <el-input prefix-icon="el-icon-mobile-phone" v-model="ruleForm.telephone" placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="am-cf">
                <input type="button" @click="handleAdd" value="点击注册" class="am-btn am-btn-primary am-btn-sm">
            </div>
            <div class="partner"></div>
        </div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/login.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            var checkMobile = (rule, value, cb) => {
                const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
                if (regMobile.test(value)) {
                    return cb()
                }
                cb(new Error('请输入合法的手机号'))
            }
            return {
                ruleForm: {},
                rules: {
                    name: [
                        { required: true, message: '用户账号为必填项', trigger: 'blur' },
                        { min: 1, max: 16, message: '用户名称在1~16个字符之间', trigger: 'blur'}
                    ],
                    password: [
                        { required: true, message: '用户密码为必填项', trigger: 'blur' },
                        { min: 6, max: 64, message: '用户密码在6~64个字符之间', trigger: 'blur'}
                    ],
                    sex: [{ required: true, message: '用户性别为必填项', trigger: 'blur' }],
                    telephone: [
                        { required: true, message: '用户电话为必填项', trigger: 'blur' },
                        { validator: checkMobile, message: '请输入正确的手机号码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleAdd() {
                this.$refs['dataAddForm'].validate((valid) => {
                    if(valid){
                        axios.post("/user/add",this.ruleForm).then((res) => {
                            if(res.data.flag){
                                this.$alert("您已注册成功，即将跳转登录页面").then(()=>{
                                    window.location.href="/pages/userlogin.html"
                                })
                            }else{
                                this.$message.error(res.data.message);
                                return false;
                            }
                        })
                    }else {
                        this.$message.error("数据校验失败，请检查你的输入信息是否正确！");
                        return false;
                    }
                })
            }
        }
    })
</script>
</body>
</html>
